<template>
  <div id="forget_container">
    <div class="forget-wrap">
        <Return title="支付结果"></Return>
      <div class="status">
        <svg v-if="status === 'success'" t="1675844048734" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2034" width="200" height="200"><path d="M512 1024C229.23264 1024 0 794.76736 0 512S229.23264 0 512 0s512 229.23264 512 512-229.23264 512-512 512zM283.92448 484.07552l-41.8816 55.84896 223.41632 209.4592 339.77344-386.32448-32.57344-37.24288-307.2 316.5184-181.53472-158.2592z" fill="#16AA68" p-id="2035"></path></svg>
        <svg v-else t="1675844414398" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2264" width="200" height="200"><path d="M512 1024C229.23264 1024 0 794.76736 0 512S229.23264 0 512 0s512 229.23264 512 512-229.23264 512-512 512z m0.7168-549.49888L324.93568 286.72 276.48 335.17568 464.26112 522.9568 276.48 710.73792l48.45568 48.45568L512.7168 571.41248 700.49792 759.1936l48.45568-48.45568L561.17248 522.9568 748.9536 335.17568 700.49792 286.72 512.7168 474.50112z" fill="#F4420A" p-id="2265"></path></svg>
        <div :style="{color: status === 'success' ? '#0abd01' : 'red'}">支付{{status === 'success' ? '成功' : '失败'}}</div>
      </div>
      <el-button class="back" type="primary" round @click="goBackHome">返回首页</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "PayResult",
  components: {},
  data() {
    return {
      status: this.$route.query.status,
    };
  },
  methods: {
    goBackHome() {
      this.$router.replace({name: 'User'})
    }
  },
};
</script>
<style lang="scss">
#forget_container {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 408px;
  height: 100%;
  overflow: hidden;
  background-color: #34393f;
  .forget-wrap {
    width: 348px;
    margin: auto;
    .status {
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 20px;
        svg {
            width: 40px;
            height: 40px;
            margin-bottom: 5px;
        }
    }
    .back {
        margin-top: 50px;
        width: 100%;
    }
  }
}
</style>
